<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
	</head>
	<body>
		<div align="center">
		<form class="layui-form " action="" >
			<div style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;">
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 120px;"><span style="color: #ff0000;">*</span><strong>请输入公告标题</strong></label>
					<div class="layui-input-block">
						<input type="text" name="pnTitle" id="pnTitle" lay-verify="title" autocomplete="off"
							placeholder="请输入" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-form-text" >
					<label class="layui-form-label"><span style="color: #ff0000;">*</span><strong>通知内容</strong></label>
					<div class="layui-input-block" style="background-color: lightgoldenrodyellow;">
						<textarea name="pnContent" id="pnContent"  lay-verify="layEditContent"
							class="layui-textarea"></textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" type="submit" lay-filter="formDemo" lay-submit="">立即提交</button>

					</div>
				</div>

			</div>
			<input type="text" id="text" />
			<input type="button" value="发送" onclick="sendMS()" />
			<input type="button" value="关闭" onclick="closeMS()" />
			<div id="res">

			</div>
		</form>
		</div>
		<script>
			//Demo
			layui.use(['form', 'layedit'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				var layedit = layui.layedit;
				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
				var editIndex = null;
				setTimeout(function() {
					editIndex = layedit.build('pnContent', {
						height: 180, //设置编辑器高度
						tool: [
							'strong' //加粗
							, 'italic' //斜体
							, 'underline' //下划线
							, 'del' //删除线
							, '|' //分割线
							, 'left' //左对齐
							, 'center' //居中对齐
							, 'right' //右对齐
							, 'link' //超链接
							, 'unlink' //清除链接
							, 'face' //表情
							, 'help' //帮助
						]
		 		});
					//获取表单前进行验证，此时已经同步了
					form.verify({
						layEditContent: function(value) {

							return layedit.sync(editIndex);

						}
					});
					form.render('select');
				}, 50);

				//监听提交
				form.on('submit(formDemo)', function(data) {

					var pnContent = layedit.getContent(editIndex);
					var pnTitle = $("#pnTitle").val();
					var d = {
						'pnContent': pnContent,
						'pnTitle': pnTitle
					}
					var url = globalData.server + 'notice/pushnotice';
					$.post(url, d, function(data) {
						console.log(data);
						if (data.count > 0) {

							var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index); //再执行关闭   
						} else {
							layer.msg("发布成功", {
								icon: 6
							});
						}
					}, "json");
					return false;
				});
			});
		</script>
		<script>
			// 1、创建socket对象
			var ws = null;
			var res = document.getElementById("res");
			if ('WebSocket' in window) {
				ws = new WebSocket(globalData.socket + "mySocket/" + globalData.getUid());
				// ws = ws.replace("https","ws").replace("http","ws");
			} else {
				alert("您的浏览器不支持websocket")
			}

			ws.onopen = function() {
				res.innerHTML += "链接已经打开" + "<br>";

			}

			ws.onclose = function() {
				res.innerHTML += "链接已经关闭" + "<br>";
				//关闭链接
				ws.close();
			}

			ws.onerror = function() {
				res.innerHTML += "链接异常" + "<br>";
			}

			//当接收到服务器信息触发该方法
			ws.onmessage = function(event) {
				//获取服务端的信息
				var val = event.data;
				var v = val.split(":");
				var k = null;
				var v = null;
				console.log("我是val：" + val);
				$.each(val.split(":"), function(i, res) {
					if (i == 0) {
						k = res;
					} else {
						v = res;
					}
				});

				res.innerHTML += globalData.getUserName() + "说：" + k + "<br>";

			}

			function sendMS() {
				var v = document.getElementById("text").value;
				console.log(v);
				//给服务端发信息
				ws.send(v);
			}

			function closeMS() {
				ws.close();
			}
		</script>

	</body>
</html>
